<template>
	<div class="content-wrapper">
		<StepTabs :tabs="tabsList" v-model="activeIndex"></StepTabs>

		<div class="content" v-if="activeIndex == 1">
			<AplidForm ref="formRef" v-bind="formConfig" v-model="formModel" @submit="onSubmit"></AplidForm>
			<div class="footer-btn">
				<el-button @click="handleNext" type="primary">下一步</el-button>
			</div>
		</div>

		<div class="content-config" v-if="activeIndex == 2">
			<ElderlyCareInstitue v-if="visibleOrg" @change="onSelectOrg" :model="formModel"></ElderlyCareInstitue>
			<div class="select-btn" v-else @click="visibleOrg = !visibleOrg">选择 服务养老组织（机构）</div>

			<ApplyConfig class="mt10" :isDetail="false" :model="formModel" v-if="visibleApplyConfig"></ApplyConfig>
			<div class="select-btn" v-else @click="visibleApplyConfig = !visibleApplyConfig">选择 申请配置信息</div>
			<div class="footer-btn">
				<el-button @click="handleProd">上一步</el-button>
				<el-button @click="onNext" type="primary">下一步</el-button>
			</div>
		</div>

		<div class="content-config" v-if="activeIndex == 3">
			<AuditConfig :model="formModel"></AuditConfig>

			<div class="footer-btn">
				<el-button @click="handleProd">上一步</el-button>
				<el-button @click="handleSubmit" type="primary">完成</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import StepTabs from '@/views/instOperate/components/StepTabs/index.vue'
import ElderlyCareInstitue from './ElderlyCareInstitue/index.vue'
import ApplyConfig from './ApplyConfig/index.vue'
import AuditConfig from './AuditConfig/index.vue'
import { formConfig } from './config'

const props = defineProps<{
	nowRowData?: any
}>()

const emit = defineEmits(['refresh'])
const formModel = ref({
	projectEnable: 1,
	organizationIds: [],
	startToEnd: [],
	organizationJson: '',
})
const formRef = ref(null)
const activeIndex = ref(1)
const visibleOrg = ref(false)
const visibleApplyConfig = ref(false)
const tabsList = [
	{ label: '01.创建项目', value: 1, tip: '设置当前项目的申请补贴类型' },
	{ label: '02.申请配置', value: 2, tip: '设置当前业务补贴类型的申请配置流程' },
	{ label: '03.审批配置', value: 3, tip: '设置当前业务补贴类型的审批配置流程' },
]

const onSelectOrg = (arr) => {
	formModel.value.organizationIds = arr.map((item) => item.creditCode)
	formModel.value.organizationJson = arr
		.map((item) => {
			if (item.creditCode) {
				return {
					label: item.organizationName,
					value: item.creditCode,
				}
			}
		})
		.filter(Boolean)
	visibleOrg.value = true
}
const handleNext = () => {
	formRef.value?.onSubmit()
}

const onNext = () => {
  if(!formModel.value.subsidyApplyConfigId && activeIndex.value == 2) {
    ElMessage.warning('请先选择申请配置!')
    return 
  }
  if(formModel.value.organizationIds.length ==0 && activeIndex.value == 2) {
    ElMessage.warning('请选择服务养老组织（机构）!')
    return 
  }
	if (activeIndex.value < tabsList.length) {
		activeIndex.value += 1
	}
}
const handleProd = () => {
	if (activeIndex.value > 1 && activeIndex.value <= tabsList.length) {
		activeIndex.value -= 1
	}
}

const onSubmit = (form, done) => {
	onNext()
	done()
}

const handleSubmit = () => {
  if(!formModel.value.approvalConfigId && activeIndex.value == 3) {
    ElMessage.warning('请选择审批配置信息!')
    return 
  }
  
	let baseApi = props.nowRowData?.id ? 'view_ofsSubsidyProject_edit' : 'view_ofsSubsidyProject_add'

	const params = {
		...formModel.value,
		autoApplyFlag: 1,
		projectStartDate: formModel.value.startToEnd[0],
		projectEndDate: formModel.value.startToEnd[1],
		organizationIds: formModel.value.organizationIds?.join(','),
		organizationJson: JSON.stringify(formModel.value.organizationJson),
	}

	apiMod[baseApi](params).then(() => {
		ElMessage.success('操作成功!')
		emit('refresh')
	})
}

onMounted(() => {
	formModel.value = {
		projectEnable: 1,
		organizationIds: [],
		startToEnd: [],
		organizationJson: [],
		...props.nowRowData,
	}
	if (props.nowRowData.startToEnd && !Array.isArray(props.nowRowData.startToEnd)) {
		formModel.value.startToEnd = props.nowRowData.startToEnd.split('~')
	}
	if (props.nowRowData.organizationJson && !Array.isArray(props.nowRowData.organizationJson)) {
		visibleOrg.value = true
		formModel.value.organizationJson = JSON.parse(props.nowRowData.organizationJson)
	}
	if (props.nowRowData.organizationIds && !Array.isArray(props.nowRowData.organizationIds)) {
		formModel.value.organizationIds = props.nowRowData.organizationIds?.split(',')
	}
	if (props.nowRowData.subsidyApplyConfigId) {
		visibleApplyConfig.value = true
	}
})
</script>

<style scoped lang="scss">
.content-wrapper {
	height: 100%;
}
.content {
	width: 45%;
	margin: 0 auto;
	margin-top: 100px;
	min-height: vw(400);
	position: relative;
	.select-btn {
		height: 72px;
		border-radius: 8px;
		background: #d5e1ff1a;
		border: 1px solid #0052d9;
		margin-top: vw(34);
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 20px;
		text-align: center;
		color: #1c1c28;
		@extend .fc;
		&:hover {
			cursor: pointer;
		}
	}
	.footer-btn {
		text-align: center;
		position: relative;
		bottom: 0;
		width: 100%;
		margin-top: 20px;
	}
}
.content-config {
	@extend .content;
	width: 75%;
}
</style>
